<template>
  <div v-if="isShow">{{ count }}</div>
  <button @click="handleClick">按钮</button>
</template>

<script lang="ts">
import { ref, reactive } from "vue";

export default {
  name: "App",
  /*
    Vue3提供两种开发模式：
      选项式API > 配置对象形式开发 { data, methods, watch, computed ... }
      组合式API > 通过调用一个个函数来定义相应的数据（实现相应的功能）
  */
  // 组合式API入口(初始化渲染时会自动触发)
  setup() {
    // console.log(this); // undefined
    // ref 定义单个数据（建议）
    // reactive 定义一组数据（如果表单项数据，用reactive）
    /******************** a功能 ********************/
    type Arr = number[];
    // const count = ref<number>(0); // ref(initValue) 因为数据类型是number，能够自动推论出来，可以省略
    const count = ref(0); // ref(initValue)
    const isShow = ref(true); // ref(initValue)
    const list = ref<Arr>([]);
    // ref 数据想要读取、更新值，需要操作 value 属性才行
    const handleClick = () => {
      count.value++;

      formData.name = "品牌~~";
    };

    interface FormData {
      id?: number;
      picUrl: string;
      name: string;
    }

    /******************** b功能 ********************/
    // ref可以定义任意类型，reactive只能定义引用数据类型
    const formData = reactive<FormData>({
      picUrl: "",
      name: "",
    });
    

    // 将数据以对象形式暴露出来，模板页面才能使用
    return {
      count,
      isShow,
      formData,
      handleClick,
    };
  },
};
</script>

<style></style>
